<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const chartRef = ref(null)
let chartInstance = null

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return

  chartInstance = echarts.init(chartRef.value)
  updateChart()
}

// 更新图表
const updateChart = () => {
  if (!chartInstance) return

  try {
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}'
      },
      series: [
        {
          name: '依赖关系',
          type: 'sankey',
          layout: 'none',
          data: (props.data && Array.isArray(props.data) && props.data.length > 0) ? props.data : getDefaultData(),
          links: getDefaultLinks(),
          emphasis: {
            focus: 'adjacency'
          },
          lineStyle: {
            curveness: 0.5
          }
        }
      ]
    }

    chartInstance.setOption(option)
  } catch (error) {
    console.error('Error updating dependency chart:', error)
    // 设置默认数据以确保图表仍然显示
    const fallbackOption = {
      series: [
        {
          name: '依赖关系',
          type: 'sankey',
          layout: 'none',
          data: getDefaultData(),
          links: getDefaultLinks()
        }
      ]
    }
    chartInstance.setOption(fallbackOption)
  }
}

// 默认数据
const getDefaultData = () => [
  { name: 'Foundation' },
  { name: 'Graphic' },
  { name: 'UI' },
  { name: 'Multimedia' },
  { name: 'Network' },
  { name: 'Application' }
]

const getDefaultLinks = () => [
  { source: 'Foundation', target: 'Graphic', value: 10 },
  { source: 'Foundation', target: 'UI', value: 15 },
  { source: 'Foundation', target: 'Network', value: 8 },
  { source: 'Graphic', target: 'UI', value: 12 },
  { source: 'Graphic', target: 'Multimedia', value: 6 },
  { source: 'UI', target: 'Application', value: 20 },
  { source: 'Network', target: 'Application', value: 7 },
  { source: 'Multimedia', target: 'Application', value: 5 }
]

// 监听数据变化
watch(() => props.data, updateChart, { deep: true })

// 监听loading状态
watch(() => props.loading, (loading) => {
  if (chartInstance) {
    if (loading) {
      chartInstance.showLoading()
    } else {
      chartInstance.hideLoading()
    }
  }
})

// 窗口大小变化时重新调整图表
const handleResize = () => {
  chartInstance?.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  window.removeEventListener('resize', handleResize)
})

defineExpose({
  updateChart,
  resize: handleResize
})
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;

  .chart {
    width: 100%;
    height: 300px;
    min-height: 300px;
  }
}
</style>